{extend name="base"/}
{block name="main"}
<style>.form_message {display: block; height: 38px; line-height: 38px; text-align: left;color:#999;}
.formControls .btn {float:left;margin-right:15px;}
.clear{clear:both;}
.form-label {font-weight: bold;}</style>
<article class="cl pd-20">
    <div id="tab_demo" class="HuiTab" style="margin-bottom: 15px; position:relative;">
        <div class="tabBar clearfix">
            <span class="current">百度MIP PC站</span>
        </div>
    </div>
    <form id="main_form" method="post">
        <div class="form form-horizontal" id="main">

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>百度MIP简介：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width: 50%;line-height: 2.0;">
                    MIP（Mobile Instant Pages - 移动网页加速器），是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统，实现移动网页加速。
                    <br/>
                    MIP官方文档显示，网站 MIP 化上线后，页面速度提升 30%~80%，页面到达率提升 5%~40%。
                    <br/>
                    参考文档: <a target="_blank" href="https://www.mipengine.org/">https://www.mipengine.org/ MIP官网</a>
                    <br/>
                    <div style="display: flex;">
                        <span>使用方法: </span>
                        <div style="display: flex;flex-direction: column; margin-left: 10px;">
                            <span>1.填写此MIP站准备使用的域名</span>
                            <span>2.点击打包按钮生成MIP站静态页面</span>
                            <span>3.点击下载按钮下载生成的打包文件</span>
                            <span>4.把文件部署到域名绑定的站点</span>
                        </div>
                    </div>


                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>使用域名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input disabled type="text" autocomplete="off" value="{$url}" placeholder="请填写准备使用的域名,例: https://www.abc.com" class="input-text" id="host" name="host">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>首页title：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" autocomplete="off" value="" placeholder="" class="input-text" name="title">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>首页description：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" autocomplete="off" value="" placeholder="" class="input-text" name="description">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>首页keywords：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" autocomplete="off" value="" placeholder="" class="input-text" name="keywords">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>选择模板：</label>
                <div class="formControls col-xs-8 col-sm-9">

                    <div style="display: flex;width: 100%;">

                        <div style="display: flex;flex-direction: column;align-items: center;width: 18%;">

                            <img src="http://ybimage.ybvips.com/public/upload/tmpl/1515571654.png" style="width: 100%;height: auto; margin-bottom: 16px;">

                            <input name="tmpl" type="radio" checked="checked"/>

                        </div>

                    </div>

                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" onclick="dobuild()" type="button" value="   打包   " style="padding:6px 12px;">

                    {if $packaged}
                    <a class="btn btn-success radius" href="/public/upload/mip_pc/MIP_PC_{$uniacid}.zip" style="padding:6px 12px;">下载</a>
                    {/if}

                </div>
            </div>

        </div>
    </form>
</article>
{/block}
{block name="script"}
<script type="text/javascript">

    $("#main_form").on('submit',function () {
        return false;
    });

    var flag = false;
    function dobuild() {

        var host = $("#host").val().trim();
        if(host.length === 0)
        {
            layer.msg("请填写使用域名",{icon:5,time:1000});
            return;
        }

        if(flag){return};
        flag = true;

        layer.msg('正在打包,请稍后！', {
            icon: 16
            ,shade: 0.05
            ,time:900000
        });

        $.ajax({
            url: "{:url('baidu/mip_pc_build')}",
            type: 'POST',
            cache: false,
            data: new FormData($('#main_form')[0]),
            processData: false,
            contentType: false,
            dataType: 'json',
            success:function (res) {
                if (res["code"] > 0) {
                    layer.msg('打包成功!',{icon:1,time:1000},function () {
                        window.location.reload();
                    });
                }else{
                    layer.msg("打包失败",{icon:5,time:1000});
                    flag = false;
                }
            },
            fail:function (err) {
                layer.msg("打包失败",{icon:5,time:1000});
                flag = false;
            }
        });
    }
</script>
{/block}